<template>
  <el-container class="app-container">
    <zl-table ref="table" url="/sys/log/list" :param.sync="par" :default-sort="{prop:'createDt',order:'descending'}">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="状态">
            <el-select v-model="par.status" placeholder="请选择" clearable>
              <el-option v-for="(item,i) in statusMap" :key="i" :label="item" :value="i" />
            </el-select>
          </el-form-item>
          <el-form-item label="请求地址">
            <el-input v-model="par.ip" clearable placeholder="输入参数名" />
          </el-form-item>
          <el-form-item label="操作">
            <el-input v-model="par.description" clearable placeholder="输入参数名" />
          </el-form-item>
          <el-form-item label="请求方法">
            <el-select v-model="par.method" placeholder="请选择" clearable>
              <el-option label="GET" value="GET" />
              <el-option label="POST" value="POST" />
              <el-option label="PUT" value="PUT" />
              <el-option label="DELETE" value="DELETE" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="60px" type="index" :index="indexMethod" />
        <el-table-column min-width="150px" prop="description" label="操作" align="left" show-overflow-tooltip sortable="custom"/>
<!--        <el-table-column prop="method" label="请求方法" width="80px" align="center" show-overflow-tooltip />-->
        <el-table-column prop="status" label="状态" align="center" min-width="100px" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='Success'" type="success">{{ statusMap[scope.row.status] }}</el-tag>
            <el-tag v-else type="danger">{{ statusMap[scope.row.status] }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="ip地址" align="center" min-width="100px" show-overflow-tooltip sortable="custom"/>
        <el-table-column label="登录地点" align="center" prop="location" :show-overflow-tooltip="true" min-width="80px" sortable="custom"/>
        <el-table-column prop="logLevelName" label="操作类型" align="center" min-width="60px" show-overflow-tooltip/>
        <el-table-column prop="username" label="操作人" align="center" min-width="60px" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="os" label="系统" align="center" min-width="60px" show-overflow-tooltip sortable="custom"/>
        <el-table-column prop="browser" label="浏览器" align="center" min-width="60px" show-overflow-tooltip sortable="custom"/>
<!--        <el-table-column prop="spendTime" label="耗时" align="center" width="80px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.spendTime }}ms
          </template>
        </el-table-column>-->
        <el-table-column prop="createDt" label="操作时间" width="180px" align="center" show-overflow-tooltip sortable="custom"/>

        <el-table-column fixed="right" align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              title="详情"
              type="primary"
              circle
              plain
              class="el-icon-view"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>
    <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="700px">
      <div class="wh100 ofy-auto" style="max-height: 400px">
        <el-form ref="editForm" :model="form" :rules="rules" :label-width="labelWidth" label-position="top">
          <el-row>
            <el-col :span="12">
              <el-form-item label="操作" prop="description" maxlength="50">
                <span>{{ form.description }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人" prop="username">
                <span>{{ form.username }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="请求路径" prop="url" class="pr10">
                <el-input :value="form.url" readonly />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求状态" prop="status">
                <span>{{ statusMap[form.status] }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="请求方法" prop="method" class="pr10">
                <span>{{ form.method }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="耗时" prop="spendTime" class="pr10">
                <span>{{ form.spendTime }}ms</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="mb0" label="请求参数" prop="parameter">
                <pre class="of-auto">{{ form.parameter }}</pre>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item class="mb0" label="响应" prop="response">
                <pre class="of-auto">{{ form.response }}</pre>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
import { validator } from '@/utils/form'
import request from '@/utils/request'
import ZlTable from '@/components/table/table-con'
import { getLogById } from '@/api/log'
export default {
  name: 'Log',
  components: { ZlTable },
  data() {
    return {
      par: {
        status: '',
        ip: '',
        method: '',
        userName: '',
        description: null,
        logLevel: null
      },
      statusMap: {
        'Success': '成功',
        'Login': '登录失败',
        'Token': 'token异常',
        'Captcha': '验证码错误',
        'Verify': '校验不通过',
        'RateLimiter': '请求被限流',
        'Lock': '获取锁失败',
        'Auth': '请求越权',
        'Session': '会话超时',
        'SystemError': '系统异常'
      },
      modules: [],
      form: {
        module: '', name: '', value: '', description: '', encrypt: 0, type: 0, effect: 0
      },
      title: '日志详情',
      add: false,
      loading: false,
      show: false,
      showEncrypt: false,
      labelWidth: '80px'
    }
  },
  computed: {
    rules() {
      return {
        module: [
          { validator: validator('notBlank'), message: '模块名不能为空', trigger: ['blur', 'change'] }
        ],
        name: [
          { validator: validator('notBlank'), message: '参数名不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    saveOrg() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          request({
            url: '/sys/setting/save', method: 'post', data: this.form
          }).then((r) => {
            this.$message.success('保存成功')
            this.loading = false
            this.show = false
            this.query()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    editRow(index, row) {
      getLogById(row.id).then((res) => {
        console.log(res.data)
        this.form = res.data
        try {
          this.form.parameter = JSON.stringify(JSON.parse(this.form.parameter), null, 2)
        } catch (e) {
          console.log(e)
        }
        try {
          this.form.response = JSON.stringify(JSON.parse(this.form.response), null, 2)
        } catch (e) {
          console.log(e)
        }
        this.show = true
        this.$nextTick(() => {
          this.$refs.editForm.clearValidate()
        })
      })
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
